<template>
    <div>
        <div class="goods_list" v-for="item in goods_list" :key="item.goods_id">
            <van-checkbox-group v-model="result">
                <van-checkbox  :name="item.goods_id" ></van-checkbox>
            </van-checkbox-group>
            <van-card  
                    :price="item.goods_price"
                    :title="item.goods_name"
                    :thumb="item.goods_img"
                    >
                    <template #footer>
                        <!-- <van-button size="small" class="jian" @click="inc(item)">
                            -
                        </van-button>
                        <span class="count">{{ item.goods_count }}</span>
                        <van-button size="small" class="add" @click="add(item)">
                            +
                        </van-button> -->
                        <van-stepper :value="item.goods_count" @plus="add(item)" @minus="jian(item)"/>
                    </template>
            </van-card>
            
        </div>
            <van-submit-bar :price="price*100" button-text="提交订单" @submit="onSubmit" :disabled="isDisabled">
                <van-checkbox v-model="allchecked" @click="checkedall(allchecked)">全选</van-checkbox>
                <template #tip>
                    您的订单为虚拟订单（支付后不发货）, 请勿支付大额款项！
                </template>
            </van-submit-bar>
    </div>

</template>
<script>
import Vue from 'vue';
import {Card, Checkbox, CheckboxGroup ,Stepper,SubmitBar,Dialog,Toast,Button} from 'vant';
import uri from '@/config/uri'
import moment from 'moment'
Vue.use(Card);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Stepper);
Vue.use(SubmitBar);
Vue.use(Dialog)
Vue.use(Toast)
Vue.use(Button)
export default {
    data() {
    return {
      result: [],
      value: 1,
      goods_list:[],
      allprice:0,
      allchecked:false,
      isDisabled:true
    }
  },
  created(){
      this.$http.get(uri.getGoodDate).then((req)=>{
          console.log(req.cartInfo);
          this.goods_list = req.cartInfo
      })
    },
    methods:{
        onSubmit(){
            
            console.log(this.allprice);
            let num = parseInt(Math.random()*1000000)
            let data = moment().format('YYYYMMDDHHmmss'); 
            let name = 'Vue综合练习（唐夏禹）'
            let oid = data+num
            let price = this.allprice
            let url = `https://m.28sjw.com/alipay_wap/alipayapi.php?WIDout_trade_no=${oid}&WIDsubject=${name}&WIDtotal_fee=${price}`
            this.$http.get('https://m.28sjw.com/order/orderPayStatusCheck.php?_oid='+oid).then(req=>{
                function beforeClose(action, done) {
            if (action === "confirm") {
              setTimeout(() => {
                done();
                Toast.fail("支付失败");
              }, 1000);
            } else {
              done();
            }
          }
          Dialog.confirm({
            title: "支付成功？",
            message: "如果您以支付成功，请点击确定",
            beforeClose,
          }); 
            })
            window.open(url,"_blank")
        },
        change(value){
            console.log(value);
        },
        checkedall(allchecked){
            if(allchecked){
            this.goods_list.forEach(el => {
                this.result.push(el.goods_id)
            });
            }
            else 
            this.result =[]
        },
        jian(el)
        {
            console.log(el);
           el.goods_count--
           if(el.goods_count<=1) {
               el.goods_count=1
           }
        },
        add(el){
            el.goods_count++
        }

    },
    computed:{
         price(){
             var sum1 = 0.00
            this.result.map(el=>{
                console.log(el);
                this.goods_list.map(el2=>{
                    console.log(el2.goods_id);
                    if(el == el2.goods_id){
                        
                        sum1 += el2.goods_count * el2.goods_price
                    }
                })
                console.log(sum1);
            })
            this.allprice = sum1.toFixed(2)
            return sum1.toFixed(2)
        },
    },
    watch:{
        result (val){
            if(this.result.length == this.goods_list.length)
            this.allchecked =true
            else 
            this.allchecked =false
        },
        price (val){
              if(val==0.00)
             this.isDisabled =true
             else
             this.isDisabled =false
        }
    }
}
</script>
<style scoped>
    .goods_list {
        display:flex;
        align-items: center;
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
    }
    .van-checkbox-group {
        box-sizing: border-box;
        width:20%;
        height: 132px;
        padding-top:70px;
        padding-left: 10px;
        background-color: #FAFAFA;
    }
    .van-card {
        width:80%
    }
    .van-stepper {
        position: absolute;
        top:60px;
        right: 10px;
    }
</style>